<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="canvas" style="background-color: black;"></canvas>
</body>
<script src="./script/utils.js"></script>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  
  const W = canvas.width = 800
  const H = canvas.height = 600

  let mouse = C.getOffset(canvas)
  drawSystem()

  canvas.onclick = function () {
    console.log(mouse.x, mouse.y)
  }

  canvas.onmousemove = function () {
    ctx.clearRect(0, 0, W, H)

    let dx = mouse.x - (W / 2)
    let dy = mouse.y - (H / 2)
    // let angle = Math.atan(dy / dx) * 180 / Math.PI
    let angle = Math.atan2(dy, dx) * 180 / Math.PI

    drawSystem()
    ctx.strokeStyle = '#FFFFFF'
    ctx.beginPath()
    ctx.lineTo(mouse.x, mouse.y)
    ctx.lineTo(W / 2, H / 2)
    ctx.stroke()
    ctx.font = '14px 苹方'
    ctx.fillStyle = '#FFFFFF'
    ctx.fillText(angle, mouse.x, mouse.y)
  }

  function drawSystem() {
    ctx.save()
    ctx.lineWidth = 1.5
    ctx.strokeStyle = '#FFFFFF'
    ctx.beginPath()
    ctx.moveTo(0, H / 2)
    ctx.lineTo(W, H / 2)
    ctx.moveTo(W / 2, 0)
    ctx.lineTo(W / 2, H)
    ctx.stroke()
    ctx.restore()
  }
</script>
</html>